<template>
    <div class="user">
        <!-- 头部布局 -->
        <div class="user_top">
            <!-- 头像 -->
            <img :src="headImg" alt="">
            <!-- 显示登录用户名 -->
            <h3 v-if="islogined">{{username}}</h3>
            <h3 v-else>点击登录</h3>
            <van-icon :name="!islogined ? 'arrow' : 'cross'" @click="loginClick" />
        </div>
        <!-- 模态框 -->
        <div class="modal" v-show="isshowmodal">
            <!-- 遮罩层 --> 
            <div class="modal_bg" @click="isshowmodal = false"></div>
            <div class="modal_content">
                <!-- 表单登录 -->
                <van-form @submit="onSubmit">
                    <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">提交</van-button>
                    </div>
                </van-form>
            </div>
        </div>
        <!-- 下侧九宫格布局 -->
        <van-grid :square="true" :column-num="3" :border="false">
            <van-grid-item v-for="item in gridArr" :key="item.id" :icon="item.icon" :text="item.type" />
        </van-grid>
    </div>
</template>

<script>
// 引入登录页接口
import { loginFn } from "@/utils/http";
// 引入头像图片
import headImg from "../assets/images/touxiang.png";
export default {
    name: "User",
    props: [""],
    data() {
        return {
            islogined: false,  // 定义一个登录状态
            username:'',  // 登录用户名
            password:'',   // 密码
            isshowmodal: false, // 是否显示登录模态框
            headImg: headImg,
            gridArr: [
                // grid数组
                { id: 0, icon: "label-o", type: "我的订单" },
                { id: 1, icon: "bill-o", type: "优惠券" },
                { id: 2, icon: "goods-collect-o", type: "礼品卡" },
                { id: 3, icon: "location-o", type: "我的收藏" },
                { id: 4, icon: "flag-o", type: "我的足迹" },
                { id: 5, icon: "contact", type: "会员福利" },
                { id: 6, icon: "aim", type: "地址管理" },
                { id: 7, icon: "warn-o", type: "账号安全" },
                { id: 8, icon: "service-o", type: "联系客服" },
                { id: 9, icon: "question-o", type: "帮助中心" },
                { id: 10, icon: "smile-comment-o", type: "意见反馈" },
            ],
        };
    },

    components: {},

    computed: {},

    created() {
        // 当切换到我的页 重新触发创建组件实例的生命周期函数
        // console.log("created");
        // 根据本地的存储的用户信息,判断当前是否登录,如果本地存储中有用户信息,说明已登录,否则未登录
        const userinfo = JSON.parse(localStorage.getItem("userinfo"));
        if (userinfo) {
            // 说明已登录
            this.islogined = true;
            this.username = userinfo.username;
        } else {
            //未登录
        }
    },

    mounted() {},

    methods: {
        // 点击提交按钮
        onSubmit(values) {
            console.log('submit', values);
            loginFn({ username: values["用户名"], pwd: values["密码"] }).then((res)=>{
                console.log(res);
                if(res.data.errno == 0){
                    // 登录成功
                    // 01: 修改登录状态
                    this.islogined = true;
                    // 02: 将后端返回的token 字段存到本地
                    localStorage.setItem('token',res.data.data.token);
                    // 03: 将后端返回的用户信息存到本地
                    localStorage.setItem(
                        "userinfo",
                        JSON.stringify(res.data.data.userInfo)
                    );
                    // 04: 隐藏模态框
                    this.isshowmodal = false;
                    // 将用户信息显示在页面中
                    this.username = res.data.data.userInfo.username;
                    // this.headImg = res.data.data.userInfo.avatar;
                }else{
                    // 登录失败
                }
            })
        },
        // 点击登录
        loginClick(){
            if(this.islogined){
                // 当前是登录状态,退出登录
                // console.log(this);
                this.$dialog
                    .confirm({
                        title: "提示",
                        message: "确认要退出吗?",
                    })
                    .then(() => {
                        // 点击确认 ,表示确定要退出(注意退出不需要调用接口,而是修改状态)
                        //01: 将本地存储的用户信息清除掉
                        localStorage.removeItem("userinfo");
                        localStorage.removeItem("token");
                        this.islogined = false;
                    })
                    .catch(() => {
                        // 点击取消
                    });
            }else{
                //当未登录时,显示登录的模态框
                this.username = "";
                this.isshowmodal = true;
            }
        }
    },
};
</script>
<style lang="less" scoped>
.user{
    .user_top{
        background: #333;
        color: #fff;
        padding: 20px 10px;
        // box-sizing: border-box;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        img {
            border-radius: 50%;
            margin-right: 10px;
            width: 70px;
            height: 70px;
        }
        h3 {
            flex: 1;
        }
    }
    .modal {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99;
        left: 0;
        top: 0;
        .modal_bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .modal_content {
            width: 90%;
            height: 200px;
            position: absolute;
            background: #fff;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding-top: 40px;
        }
    }
}
</style>